<template>
  <div class="login-form block_1 flex-col">
    <div class="line" :class="typeBgClass" />
    <div class="title">用户登录</div>
    <div class="form">
      <div class="form-input">
        <div class="left" :class="typeBgClass" />
        <div class="input-item">
          <input v-model="loginForm.username" name="username" placeholder="账号/手机号/身份证">
        </div>
      </div>
      <div class="form-input">
        <div class="left" :class="typeBgClass" />
        <div class="input-item">
          <input v-model="loginForm.password" name="password" type="password" placeholder="请输入密码">
        </div>
      </div>
      <div class="form-input form-input-code">
        <div class="left" :class="typeBgClass" />
        <div class="input-item">
          <input v-model="loginForm.code" placeholder="请输入图片验证码">
        </div>
        <div class="right">
          <img
            class="code-img"
            referrerpolicy="no-referrer"
            src="@/assets/login/code.png"
          >
        </div>
      </div>
    </div>
    <div class="other">
      <div class="other-card-login" @click="handleBuilding">其他证件登录&gt;</div>
      <div class="forgot" :class="typeTxClass" @click="handleBuilding">忘记密码?</div>
    </div>
    <div class="login-btn" :class="loadingClass" @click="handleLogin"><span>登&nbsp;录</span></div>
    <div class="other-login" :class="typeTxClass">
      <span @click="handleBuilding">扫码登录</span>
      <span @click="handleBuilding">短信验证码登录</span>
      <span @click="handleBuilding">国家政务服务平台账号登录</span>
    </div>
    <div class="register">
      <span class="no">还没账号？</span>
      <span class="go" :class="typeTxClass" @click="handleBuilding">去注册</span>
    </div>
  </div>
</template>

<script>
import { setLoginType } from '@/utils/common'

export default {
  name: 'LoginForm',
  props: {
    type: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      loginForm: {
        type: 3,
        username: '',
        password: '',
        code: ''
      },
      loading: false,
      redirect: ''
    }
  },
  computed: {
    typeBgClass() {
      let obj = {}
      switch (this.type) {
        case 1:
          obj = { 'primary-bg-color-public-security': true }
          break
        case 2:
          obj = { 'primary-bg-color-government': true }
          break
        case 3:
          obj = { 'primary-bg-color-property': true }
          break
      }
      return obj
    },
    typeTxClass() {
      let obj = {}
      switch (this.type) {
        case 1:
          obj = { 'primary-tx-color-public-security': true }
          break
        case 2:
          obj = { 'primary-tx-color-government': true }
          break
        case 3:
          obj = { 'primary-tx-color-property': true }
          break
      }
      return obj
    },
    loadingClass() {
      let obj = { disabled: this.loading }
      switch (this.type) {
        case 1:
          obj = { 'primary-bg-color-public-security': true }
          break
        case 2:
          obj = { 'primary-bg-color-government': true }
          break
        case 3:
          obj = { 'primary-bg-color-property': true }
          break
      }
      return obj
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.loginForm)
      if (this.loginForm.username.length < 1) {
        this.$message.warning('请输入用户名')
        return
      }
      if (this.loginForm.password.length < 1) {
        this.$message.warning('请输入密码')
        return
      }
      if (this.loginForm.code.length < 1) {
        this.$message.warning('请输入验证码')
        return
      }
      if (this.loginForm.code.toUpperCase() !== 'KYQZ') {
        this.$message.warning('验证码不正确')
        return
      }
      this.loading = true
      this.loginForm.type = this.type
      setLoginType(this.type)
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleBuilding() {
      this.$message.info('功能开发中')
    }
  }
}
</script>

<style lang="scss" scoped>
$primary-color-property:rgba(26, 190, 115, 1);
$primary-color-public-security:#032D83;
$primary-color-government:#097FF5;
$text-color:rgba(0, 0, 0, 1);
$text-color-placeholder:rgba(175, 175, 175, 1);
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
.primary-bg-color-property{
  background-color: $primary-color-property;
}
.primary-tx-color-property{
  color: $primary-color-property;
}
.primary-bg-color-public-security{
  background-color: $primary-color-public-security;
}
.primary-tx-color-public-security{
  color: $primary-color-public-security;
}
.primary-bg-color-government{
  background-color: $primary-color-government;
}
.primary-tx-color-government{
  color: $primary-color-government;
}
.login-form{
  width: 573px;
  height: 679px;
  background: #FFFFFF;
  border-radius: 20px;
  position: relative;
}
.line {
  position: absolute;
  left: 219px;
  top: -1px;
  width: 139px;
  height: 8px;
}
.title{
  color: $text-color;
  font-size: 28px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  width: 100%;
  margin-top: 104px;
}
.form{
  margin: 78px 0 0 102px;
}
.form-input{
  background-color: rgba(247, 247, 247, 1);
  margin-bottom: 19px;
  z-index: 11;
  width: 376px;
  height: 40px;
  display: flex;
  .left {
    width: 5px;
    height: 40px;
  }
    .input-item {
      width: 100%;
      height: 40px;
      input{
        padding-left: 11px;
        padding-right: 16px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: $text-color;
        font-size: 14px;
        text-align: left;
        background: none;
        border: none;
        outline:none;
      }
    }
  }
.other{
  display: flex;
  margin-top: 3px;
  margin-left: 102px;
  margin-right: 96px;
  .other-card-login{
    flex: 1;
    text-align: left;
    cursor: pointer;
  }
  .forgot{
    flex: 1;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }
}
.login-btn{
  border-radius: 20px;
  cursor: pointer;
  z-index: 10;
  height: 46px;
  width: 376px;
  margin: 76px 0 0 102px;
  text-align: center;
  span {
    width: 38px;
    height: 46px;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    white-space: nowrap;
    line-height: 46px;
  }
}
.disabled{
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events:none;
}
.other-login{
  margin-top: 22px;
  margin-left: 110px;
  text-align: left;
  font-size: 14px;
  span{
    margin-right: 10px;
    cursor: pointer;
  }
}
.register{
  margin-top: 67px;
  text-align: center;
  .no{
    width: 112px;
    height: 12px;
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    cursor: default;
  }
  .go{
    width: 112px;
    height: 12px;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    cursor: pointer;
  }
}
</style>
